<template>
    <div :class="{ 'transparency': transparency, 'top': transparency }">
        <div class="header">
            <div class="header-top" :class="{ 'black-opacity': transparency }">
                <div class="logo">我是一个大的logo</div>
            </div>
            <div class="header-footer auto-main" :class="{ 'black-opacity': transparency }">
                <ul class="nav">
                    <li>
                        <router-link to="/">首页</router-link>
                    </li>
                    <li class="out-li">
                        <router-link to="/guide">
                            导览
                        </router-link>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                    <li class="out-li">
                        <a href="/exhibit">展览</a>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                    <li class="out-li">
                        <router-link to="/collect">藏品</router-link>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                    <li class="out-li">
                        <router-link to="/education">教育</router-link>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                    <li class="out-li">
                        <router-link to="/science">学术</router-link>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                    <li class="out-li">
                        <router-link to="/culture">文创</router-link>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                    <li class="out-li">
                        <router-link to="/news">资讯</router-link>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                    <li class="out-li">
                        <router-link to="/about">关于</router-link>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                    <li class="out-li">
                        <router-link>巴拉巴拉</router-link>
                        <div class="hover-nav">
                            <div>我是1</div>
                            <div>我是2</div>
                            <div>我是3</div>
                            <div>我是4</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="header-hover" ref="bgcaaa" :class="{ 'black-opacity': transparency }">
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref } from 'vue';

defineOptions({
    name: 'AllHeader'
})

defineProps({
    transparency: {
        type: Boolean,
        defadivt: false
    }
})
const bgcaaa = ref(null)
onMounted(() => {
    let getLi = document.querySelectorAll('.nav>li')
    getLi.forEach((item, index) => {
        if (index !== 0) {
            item.addEventListener('mouseover', () => {
                bgcaaa.value.style.display = 'block'
                console.log('进入了')
            }, true)
            item.addEventListener('mouseout', () => {
                bgcaaa.value.style = ''
                console.log('离开了')
            })
        }
    })
})
</script>

<style lang="scss" scoped>
.black-opacity {
    background-color: black !important;
}

.header {

    .header-top {
        margin-bottom: 3px;
        background-color: #fff;
    }

    .logo {
        font-size: 20px;
        height: 90px;

    }

    .nav {
        display: flex;
        font-size: 16px;

        li {
            height: 50px;
            width: 110px;
            text-align: center;
            line-height: 50px;
            position: relative;

            .hover-nav {
                display: none;
                position: absolute;
                left: 0;
                font-size: 16px;
                z-index: 3;

                div {
                    height: 45px;
                    width: 110px;
                    line-height: 52px;

                    &:hover {
                        color: rgb(186, 156, 69);
                    }
                }
            }
        }

        li:nth-of-type(1) {
            border-bottom: 3px solid rgb(186, 156, 69);
        }

        li:hover .hover-nav {
            display: flex;
        }

        .out-li:hover {
            border-bottom: 3px solid rgb(186, 156, 69);
        }
    }

    .header-footer {
        background-color: white;
        position: relative;
    }

    .header-hover {
        display: none;
        position: absolute;
        left: 0;
        width: 100%;
        height: 50px;
        background-color: white;
        z-index: 2;
    }
}

.auto-main {
    display: flex;
    justify-content: center;
}

.transparency {
    opacity: .6;
    color: white;

    a {
        color: white;
    }
}

.top {
    width: 100%;
    position: absolute;
    z-index: 999;
}

a {
    color: black;
}

a:hover {
    text-decoration: none;
}
</style>